@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.next-steps {

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;

		h2 {
			@include heading-large;
			color: var(--color-neutral-100);
		}
		.circular__progress-bar {
			margin-right: 8px;

			.circular__progress-bar-text {
				@include heading-small;
				color: var(--color-neutral-100);
			}

			.circular__progress-bar-fill-circle {
				stroke: var(--color-jetpack);
			}
		}
	}

	p,
	button {
		@include body-medium;
		color: var(--color-neutral-80);
	}

	button.dismiss {
		cursor: pointer;
		text-decoration: underline;

		&:hover {
			color: var(--color-jetpack);
		}
	}

	.checklist-item__task {

		.checklist-item__text {
			@include body-medium;
			color: var(--color-neutral-80);
		}

		&.completed .checklist-item__text {
			text-decoration: line-through;
		}

		&.completed.enabled:hover,
		&.pending:hover,
		&.completed.enabled > a:focus,
		&.pending > a:focus {
			.checklist-item__text {
				color: var(--color-primary);
			}

			.checklist-item__chevron,
			.checklist-item__checkmark {
				fill: var(--color-primary);
			}
		}
	}

}

.card:has(.next-steps) {
	padding: 16px 24px;
	border-radius: 4px;
}
